<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>齐力数据交换平台</title>
    <link href="resources/skin/default/plugin/jquery-ui/jquery-ui-min.css" rel="stylesheet" type="text/css"/>
    <link href="resources/skin/default/css/skin.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="resources/skin/default/css/layui-v2.5.4/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="resources/skin/default/css/table.css" media="all">
    <style>
        .layui-form-select dl dd.layui-this {
            background: #FFB800;
        }

        .layui-laypage .layui-laypage-curr .layui-laypage-em {
            background-color: #f09500
        }

        .searchInput {
            width: 230px;

        }
    </style>
</head>
<body>
<div class="bup-header clear">
    <div class="bup-logo"><img src="resources/skin/default/image/bup-logo.png"/></div>
    <div class="bup-title">
        <h3>开封齐力数据交换平台</h3>
    </div>
</div>
<div id="bup_wrap" class="bup-wrap clear mini">
    <div class="bup-container">
        <div id="main_content" class="clear">
            <div class="top" onkeydown="keySearch();">
                <form class="layui-form" action="">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="padding-left: 5px">业务类型</label>
                        <div class="layui-input-inline searchInput">
                            <select id="searchBusiType">
                                <option value="" selected="selected">选择业务类型</option>
                                <option value="0">张拉</option>
                                <option value="1">压浆</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" style="padding-left: 5px">上传状态</label>
                        <div class="layui-input-inline searchInput">
                            <select id="searchIsAll">
                                <option value="" selected="selected">选择梁板上传平台状态</option>
                                <option value="2">未上传</option>
                                <option value="1">已上传</option>
                                <option value="0">上传失败</option>
                                <option value="3">全部</option>
                            </select>
                        </div>
                    </div>
                <!--   <div class="layui-inline searchInput">
                        <label class="layui-form-label" style="padding-left: 5px">砼试块强度</label>
                        <div class="layui-input-block">
                            <input type="text" id="bridge" name="bridge" placeholder="请输入" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>-->
                    <!--    <div class="layui-inline searchInput">
                           <label class="layui-form-label">梁体长度</label>
                           <div class="layui-input-block">
                               <input type="text" id="concrete" name="concrete" placeholder="请输入" autocomplete="off"
                                      class="layui-input">
                           </div>
                       </div>-->
                    <button type="button" style="margin-left: 10px;" class="layui-btn  layui-btn-warm"
                            onclick="deviceSearch()">查询
                    </button>
                    <button type="button" class="layui-btn layui-btn-normal" onclick="uploads()">上传平台</button>
                    <button type="button" class="layui-btn layui-btn-normal" onclick="getRwdlist()">获取张拉任务单</button>
                </form>
            </div>
            <input type="hidden" id="deviceId" name="deviceId"/>
            <table class="layui-table table" cellpadding="0 " cellspacing="0">
                <thead>
                <tr>
                    <th><input type="checkbox" onclick="checkAll(this)" id="all" ssr-select-all="checkboxItem"></th>
                    <th>ID</th>
                    <th>梁板编号</th>
                    <th>上传状态</th>
                </tr>
                </thead>
                <tbody id="deviceListContent"></tbody>
            </table>
            <div id="page" style="width: 100%;margin-top:10px;text-align: center;"></div>

        </div>
    </div>
</div>
<script type="text/javascript" src="resources/skin/default/plugin/jquery/jquery.min.js"></script>
<script type="text/javascript" src="resources/skin/default/plugin/jquery-ui/jquery-ui-min.js"></script>
<script type="text/javascript" src="resources/skin/default/plugin/jquery-ui/jquery-ui-timepicker.min.js"></script>
<script type="text/javascript" src="resources/skin/default/css/layui-v2.5.4/layui/layui.js"></script>
<script type="text/javascript">
    var line = '<td>---</td>'
    layui.use(['form'], function () {
        var form = layui.form
    });

    var MaskUtil = (function () {
        var $mask, $maskMsg;
        var defMsg = '正在处理，请稍待。。。';

        function init() {
            if (!$mask) {
                $mask = $("<div></div>")
                    .css({
                        'position': 'absolute'
                        , 'left': '0'
                        , 'top': '0'
                        , 'width': '100%'
                        , 'height': '100%'
                        , 'opacity': '0.3'
                        , 'filter': 'alpha(opacity=30)'
                        , 'display': 'none'
                        , 'background-color': '#ccc'
                    })
                    .appendTo("body");
            }
            if (!$maskMsg) {
                $maskMsg = $("<div></div>")
                    .css({
                        'position': 'absolute'
                        , 'top': '50%'
                        , 'margin-top': '-20px'
                        , 'padding': '5px 20px 5px 20px'
                        , 'width': 'auto'
                        , 'border-width': '1px'
                        , 'border-style': 'solid'
                        , 'display': 'none'
                        , 'background-color': '#ffffff'
                        , 'font-size': '14px'
                    })
                    .appendTo("body");
            }
            $mask.css({width: "100%", height: $(document).height()});
            var scrollTop = $(document.body).scrollTop();
            $maskMsg.css({
                left: ($(document.body).outerWidth(true) - 190) / 2
                , top: (($(window).height() - 45) / 2) + scrollTop
            });
        }

        return {
            mask: function (msg) {
                init();
                $mask.show();
                $maskMsg.html(msg || defMsg).show();
            }
            , unmask: function () {
                $mask.hide();
                $maskMsg.hide();
            }
        }
    }());
    /*$(function() {
        var searchBusiType = $("#searchBusiType  option:selected").val();
        var searchIsAll = $("#searchIsAll  option:selected").val();
        getDeviceList(1, 10, searchBusiType, searchIsAll);
    });*/
    //回车事件查询
    function keySearch() {
        if (window.event.keyCode == 13) {
            deviceSearch(); //调用查询事件
        }
    }

    //搜索框
    function deviceSearch() {
        var searchBusiType = $("#searchBusiType option:selected").val();
        var searchIsAll = $("#searchIsAll option:selected").val();
        if (searchBusiType == '') {
            layer.confirm('请选择业务类型？', {
                title: '温馨提示',
                shade: 0.5
            })
            return;
        }
        if (searchIsAll == '') {
            layer.confirm('请选择选择梁板上传平台状态？', {
                title: '温馨提示',
                shade: 0.5
            })
            return;
        }
        getDeviceList(1, 30, searchBusiType, searchIsAll);
    }

    //列表
    function getDeviceList(curPage, pageSize, searchBusiType, searchIsAll) {
        MaskUtil.mask("正在查询中，请稍等...");
        var data = {
            'searchBusiType': searchBusiType,
            'searchIsAll': searchIsAll,
            'curPage': curPage,
            'pageSize': pageSize
        };
        $.ajax({
            type: "POST",
            url: "/NettyTcpServer/public/list",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(data),
            success: function (data) {
                MaskUtil.unmask();
                var result = JSON.parse(data);
                if (result.statusCode == 0) {
                    var responseContent = JSON.parse(result.responseContent)
                    /*var responseExpend = JSON.parse(result.responseExpend)
                    //总记录数
                    var total = responseExpend.total;
                    //当前第几页
                    var curPage = responseExpend.curPage;
                    //每页条数
                    var limit = responseExpend.pageSize;*/
                    //列表
                    var deviceList = responseContent;
                    var html = "";
                    for (var i = 0; i < deviceList.length; i++) {
                        var id = deviceList[i].id;
                        html += '<tr>';
                        html += '<td><input class="checkboxItem" type="checkbox" name="box" value=' + id + '></td>';
                        //id
                        html += '<td>' + deviceList[i].id + '</td>';
                        //梁板编号
                        html += '<td>' + deviceList[i].qlbh + '</td>';
                        //状态
                        if (deviceList[i].uploaded == '0') {
                            html += '<td>失败</td>';
                        } else if (deviceList[i].uploaded == '1') {
                            html += '<td>成功</td>';
                        } else if (deviceList[i].uploaded == undefined || deviceList[i].uploaded == '') {
                            html += '<td>未上传</td>';
                        } else {
                            html += '<td>未知</td>';
                        }
                        
                        html += '</tr>';
                    }
                    $("#deviceListContent").html(html);
                    //调用分页方法
                    //getPageList(total, curPage, limit, searchBusiType,searchIsAll);
                }
            }
        });
    }

    //封装的分页方法
    function getPageList(total, curPage, limit, searchBusiType, searchIsAll) {
        //分页方法
        layui.use(['laypage', 'layer'], function () {
            var laypage = layui.laypage,
                layer = layui.layer;
            laypage.render({
                elem: 'page',
                count: total || 0,
                limit: limit || 10,
                curr: curPage || 1,
                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                jump: function (obj, first) {
                    if (!first) {
                        getDeviceList(obj.curr, obj.limit, searchBusiType, searchIsAll);
                    }
                }
            });
        });
    }

    function checkAll(obj) {
        var ids = document.getElementsByName("box");
        for (var i = 0; i < ids.length; i++) {
            ids[i].checked = obj.checked;
        }
    }

    function getRwdlist() {
        var deviceListContent = $("#deviceListContent").html().trim();
        if (deviceListContent === "" || deviceListContent === "<!-- Empty -->") {
            alert("请先查询张拉数据");
            return;
        }

        // 添加表头
        var headerRow = document.querySelector("thead tr");
        if (headerRow.querySelectorAll("th").length < 5) { // 避免重复添加
            var newHeader = document.createElement("th");
            newHeader.innerHTML = "张拉任务单";
            headerRow.appendChild(newHeader);
        }

        // 为每一行添加任务单信息
        var rows = document.querySelectorAll("#deviceListContent tr");
        for (var i = 0; i < rows.length; i++) {
            var cells = rows[i].querySelectorAll("td");
            if (cells.length < 5) { // 避免重复添加
                var newCell = document.createElement("td");
                // 先添加一个默认的下拉框
                newCell.innerHTML = '<div class="layui-input-inline"><select name="rwdSelect' + i + '"><option value="">加载中...</option></select></div>';
                rows[i].appendChild(newCell);
            }
        }

        // 通过AJAX获取任务单数据并填充下拉框
        $.ajax({
            type: "POST",
            url: "/NettyTcpServer/public/getRwdlist",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                var result = JSON.parse(data);
                if (result.statusCode == 0) {
                    var rwdData = JSON.parse(result.responseContent);
                    
                    // 获取所有下拉框并填充数据
                    var selects = document.querySelectorAll("select[name^='rwdSelect']");
                    for (var i = 0; i < selects.length; i++) {
                        var select = selects[i];
                        // 清空原有选项
                        select.innerHTML = '<option value="">请选择</option>';
                        
                        // 添加新选项
                        for (var key in rwdData) {
                            if (rwdData.hasOwnProperty(key)) {
                                var option = document.createElement("option");
                                option.text = key;
                                option.value = rwdData[key];
                                select.appendChild(option);
                            }
                        }
                    }
                    
                    // 重新渲染layui表单
                    layui.use('form', function(){
                        var form = layui.form;
                        form.render('select');
                    });
                }
            },
            error: function () {
                // 出错时更新下拉框提示
                var selects = document.querySelectorAll("select[name^='rwdSelect']");
                for (var i = 0; i < selects.length; i++) {
                    selects[i].innerHTML = '<option value="">加载失败</option>';
                }
                
                layui.use('form', function(){
                    var form = layui.form;
                    form.render('select');
                });
            }
        });
    }


    // 上传数据到平台
    function uploads() {
        var cks = document.getElementsByName("box");
        var str = "";
        //拼接所有id
        for (var i = 0; i < cks.length; i++) {
            if (cks[i].checked) {
                str += cks[i].value + ",";
            }
        }
        //去掉末尾的','
        str = str.substring(0, str.length - 1);
        if (str == '') {
            layer.confirm('请至少选择一条数据？', {
                title: '温馨提示',
                shade: 0.5
            })
            return;
        }
        
        // 检查是否已点击"获取张拉任务单"
        var hasRwdColumn = document.querySelectorAll("select[name^='rwdSelect']").length > 0;
        if (!hasRwdColumn) {
            layer.confirm('请先点击"获取张拉任务单"按钮！', {
                title: '温馨提示',
                shade: 0.5
            });
            return;
        }
        
        // 检查选中的行是否有未选择张拉任务单的
        var unselectedRwd = []; // 存储未选择任务单的梁板编号
        var rwdData = {}; // 存储每行选中的张拉任务单
        for (var i = 0; i < cks.length; i++) {
            if (cks[i].checked) {
                // 获取该行的梁板编号
                var row = cks[i].closest('tr');
                var beamNumber = row.cells[2].innerText; // 梁板编号在第3列(索引为2)
                var beamId = cks[i].value; // 梁板ID
                
                // 查找该行的张拉任务单选择框
                var rwdSelect = row.querySelector('select');
                if (rwdSelect && (rwdSelect.value === "" || rwdSelect.selectedIndex === 0)) {
                    // 如果选择了默认的"请选择"选项，则记录该梁板编号
                    unselectedRwd.push(beamNumber);
                } else if (rwdSelect) {
                    // 保存选中的张拉任务单
                    // 保存选中的张拉任务单、选中索引和选中文本
                    rwdData[beamId] = {
                        value: rwdSelect.value,
                        selectedText: rwdSelect.options[rwdSelect.selectedIndex].text
                    };
                }
            }
        }
        
        // 如果有未选择任务单的梁板，提示用户
        if (unselectedRwd.length > 0) {
            layer.confirm('以下梁板编号未选择张拉任务单，请先选择：' + unselectedRwd.join(', '), {
                title: '温馨提示',
                shade: 0.5
            });
            return;
        }
        
/*        var bridge = $(" #bridge").val();
        if (bridge == '') {
            layer.confirm('请填写砼试块强度!', {
                title: '温馨提示',
                shade: 0.5
            })
            return;
        }*/

        var searchBusiType = $("#searchBusiType option:selected").val();
        var data = {
            'searchBusiType': searchBusiType,
            "ids": str,
            "rwdData": rwdData  // 添加张拉任务单数据

        };
        layer.confirm('确定上传这些数据到平台吗？请再次核实', {
            title: '温馨提示',
            shade: 0.5
        }, function () {
            layer.close(layer.index);
            MaskUtil.mask("正在上传中，请稍等...");
            $.ajax({
                type: "POST",
                url: "/NettyTcpServer/public/uploadData",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(data),
                success: function (data) {
                    MaskUtil.unmask();
                    var result = JSON.parse(data);
                    layer.msg(result.responseContent);
                    //重新加载列表数据
                    deviceSearch();
                    // 重新添加张拉任务单列
                    setTimeout(function() {
                        getRwdlist();
                    }, 500);
                }
            });
        });
    }
</script>
</body>
</html>